import React from 'react';
import './index.css';

import mzsdk from '../../../../utils/mzsdk';

import { Toast } from 'antd-mobile';

/**
 * 礼物列表组件
 */

export default class GiftList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            gifts: [],
            selectIndex: -1,
            selectItem: null,
        }
    }

    componentDidMount() {
        this.getData()
    }

    getData = () => {
        var _this = this;
        mzsdk.gift.getGiftList({ ticketId: this.props.ticketId }).then(res => {
            _this.setState({
                gifts: res
            })
        }, (err) => {
            Toast.info(err.msg, 1.5)
        })
    }

    onSelectGift = (index, item) => {
        this.setState({
            selectIndex: index,
            selectItem: item
        })
    }

    clickSendGiftButton = () => {
        let { selectItem } = this.state;
        if (selectItem == null) {
            return;
        }

        var _this = this;
        let sendGiftParams = {
            giftId: selectItem.id,
            ticketId: this.props.ticketId,
            quantity: '1'
        }

        mzsdk.gift.pushGiftMessage(sendGiftParams).then(res => {
            Toast.info('礼物发送成功', 1.5)
            _this.setState({
                selectItem: null,
                selectIndex: -1,
            }, () => {
                _this.props.onClose()
            })
        }, (err) => {
            Toast.info(err.msg, 1.5)
        })
    }

    render() {
        let { gifts, selectIndex } = this.state;
        return (
            <div>
                {
                    gifts.length > 0 ?
                        <div className="live-gift-background">
                            <div className="live-gift-list-background">
                                {
                                    gifts.map((item, index) => {
                                        return (
                                            <div className={selectIndex == index ? 'live-gift-list-item gift-select' : 'live-gift-list-item'} key={index} onClick={this.onSelectGift.bind(this, index, item)}>
                                                <img src={item.icon}></img>
                                                <div className="live-gift-item-name">{item.name}</div>
                                                <div className="live-gift-item-price">{item.pay_amount == 0?'免费':`¥${item.pay_amount}`}</div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                            <div className="live-gift-send-background">
                                <div className="live-gift-send" onClick={this.clickSendGiftButton}>赠送</div>
                            </div>
                        </div> :
                        <div className="live-gift-empty">暂无礼物</div>
                }
            </div>
        )
    }
}
